<template>
  <div v-if="isLogin && user?.type === 0">
    <!-- <div>
      <div class="book-search">pay money</div>
      <el-button type="primary" @click="payMoney">pay</el-button>
    </div>
    <el-divider></el-divider> -->
    <div>
      <div class="book-search">book borrow</div>
      <el-form :inline="true" :model="borrowBook" class="demo-form-inline">
        <el-form-item label="bookId" prop="bookId">
          <el-input v-model="borrowBook.bookId" placeholder="bookId"></el-input>
        </el-form-item>
        <el-form-item label="userId" prop="userId">
          <el-input v-model="borrowBook.userId" placeholder="userId"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onBorrowBook">borrow</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider></el-divider>
    <div>
      <div class="book-search">return books</div>
      <el-form :inline="true" :model="returnBook" class="demo-form-inline">
        <el-form-item label="bookId" prop="bookId">
          <el-input v-model="returnBook.bookId" placeholder="bookId"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onReturnBook">return</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider></el-divider>

    <div>
      <div class="book-search">action</div>
      <div class="demo-form-inline">
        <el-button
          class="but"
          type="primary"
          @click="routeToPath('/change/bookCategory')"
          >change book category
        </el-button>
        <el-button
          class="but"
          type="primary"
          @click="routeToPath('/change/bookLocation')"
          >change book location
        </el-button>
        <el-button
          class="but"
          type="primary"
          @click="routeToPath('/check/damageBook')"
          >check damage book
        </el-button>
        <el-button
          class="but"
          type="primary"
          @click="routeToPath('/check/lostBook')"
          >check lost book
        </el-button>
      </div>
    </div>
    <el-divider></el-divider>

  </div>
  <div>
    <div class="book-search">book search</div>
    <el-form :inline="true" :model="searchBook" class="demo-form-inline">
      <el-form-item label="ISBN" prop="isbn">
        <el-input v-model="searchBook.isbn" placeholder="ISBN"></el-input>
      </el-form-item>
      <el-form-item label="bookName" prop="bookName">
        <el-input v-model="searchBook.bookName" placeholder="bookName"></el-input>
      </el-form-item>
      <el-form-item label="author" prop="author">
        <el-input v-model="searchBook.author" placeholder="author"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearchBook">search</el-button>
      </el-form-item>
    </el-form>
  </div>
  <el-divider></el-divider>
  <div>
    <el-row v-for="(books, index) in displayBooks" :key="index">
      <el-col v-for="book in books" :span="24 / cols" :key="book.isbn">
        <book-card :book="book" class="card-container"></book-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import BookCard from "./components/BookCard.vue";
import useCols from "./business/useCols";
import useDisplayBooks from "./business/useDisplayBooks";
import useBooks from "./business/useBooks";
import type { Book } from "@/domain/book";
import { getBooks } from "./business/useBooks";
import { ref } from "@vue/reactivity";
import * as userApi from "@/api/user";
import type { User } from "@/domain/user";
import { onMounted, onUpdated, watch } from "@vue/runtime-core";
import { storeToRefs } from "pinia";
import { useUserStore } from "@/stores/user";
import * as bookApi from "@/api/books";
import { ElMessage } from "element-plus";

import { useRouter } from "vue-router";
const router = useRouter();

const routeToPath = (path: string) => {
  router.push({
    path,
  });
};

let books = useBooks();
const cols = useCols();
const displayBooks = useDisplayBooks(books, cols);

const payMoney = () => {
  location.href = 'http://localhost:8080/barcode/index.html'
  // router.push({
  //   path: "/barcode/index.html"
  // });
  // bookApi.alipay({ bookId: returnBook.value.bookId })
  // .then(() => {
  //   ElMessage.success("paid successfully");
  // })
  // .catch(err => {
  //   ElMessage.error(err);
  // });
};

const borrowBook = ref({
  bookId: '',
  userId: '',
});
const onBorrowBook = () => {
  bookApi.borrowBooks({ bookIdString: borrowBook.value.bookId, userId: borrowBook.value.userId })
  .then(() => {
    ElMessage.success("borrow success");
  })
  .catch(err => {
    ElMessage.error(err);
  });
};

const returnBook = ref({
  bookId: '',
});
const onReturnBook = () => {
  bookApi.returnBook({ bookId: returnBook.value.bookId })
  .then(() => {
    ElMessage.success("return success");
  })
  .catch(err => {
    ElMessage.error(err);
  });
};

const searchBook = ref({
  isbn: '',
  bookName: '',
  author: '',
});
const onSearchBook = async () => {
  if (searchBook.value.isbn) {
    getBooks(books, 1, searchBook.value);
  } else if (searchBook.value.bookName) {
    getBooks(books, 2, searchBook.value);
  } else {
    getBooks(books, 3, searchBook.value);
  }
  console.log('submit!', books.value);
};

const user = ref<User | null>({
  type: 1
});
const store = useUserStore();
let isLogin = storeToRefs(store).isLogin;
onMounted(() => {
  userApi
    .checkUser()
    .then((res) => {
      user.value = res;
    })
    .catch(() => {
      user.value = {};
      store.isLogin = false;
    });
});
</script>
<style scoped>
.book-search {
  font-size: 16px;
  text-align: left;
  padding: 20px 5px;
  color: #409eff;
}
.card-container {
  margin: 16px;
}
.but {
  margin-bottom: 10px;
}
</style>
